<template>
  <div  >
    <myNavbar title="红包提现"></myNavbar>
    <div class="mine-container" >
      <div class="bg"></div>
      <image class="vein" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
      <div class="cash-out" >
        <div class="cash-out-cash-main">
          <div class="main-top"  @click="Selectbank">
            <div >
              <text style="font-size: 28px">转账以下账号</text>
            </div>
            <div>
              <div style="display: flex;flex-direction: row;align-items: center;justify-content: center"  >
                <div>
                  <image v-if="accountitem.id && accountitem.bankInfoId == 30" style="width:50px;height: 50px;border-radius: 16px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bankJH.png"></image>
                  <image v-else-if="accountitem.id && accountitem.bankInfoId == 1" style="width:50px;height: 50px;border-radius: 16px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/weixin1.png"></image>
                  <image v-else-if="accountitem.id && accountitem.bankInfoId == 2" style="width:50px;height: 50px;border-radius: 16px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/Alipay.png"></image>
                  <image v-else style="width:50px;height: 50px;border-radius: 16px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bankAll.png"></image>


                </div>
                <div>
                  <text v-if="!accountitem.id" style="padding-left:15px;font-size: 28px;font-weight: bold">选择账号</text>
                       <text  v-if="accountitem.id" style="padding-left:15px;font-size: 28px;font-weight: bold"> {{accountitem.bankName}} ({{ accountitem.bankNum.substring(accountitem.bankNum.length-4)}})</text>
                </div>
              </div>
            </div>
            <text style="font-size: 16px" class="mine-order-icon">&#xe65e;</text>
          </div>
          <div class="cash-out-cash-main-cash-bottom">
            <div class="cash-center">
              <text class="cash-out-cash-main-cash-bottom-cash-center-cash-center-top" >提现金额</text>
              <div class="cash-out-cash-main-cash-bottom-cash-center-cash-data">
                <text class="cash-out-cash-main-cash-bottom-cash-center-cash-data-cash-center-mark">¥</text>
                <input class="cash-out-cash-main-cash-bottom-cash-center-cash-data-cash-center-input"  v-model="amount"  name="input" type="number" :maxlength="maxlength"  bindinput ="getInput" placeholder="请输入提现金额" @input="calculationPoint1" />
              </div>
              <div class="cash-out-cash-main-cash-bottom-center-bottom" style="display: flex;flex-direction: row;justify-content: space-between">
                <div style="display: flex;flex-direction: row">
                  <text >可提现金额 {{maxTransferPoint/100}},</text>
                  <text class="center-bottom-cash-center-text cash-out-cash-main-cash-bottom-center-bottom-cash-center-text" @click="wholeCashOut"> 全部提现</text>
                </div>
                <text> 手续费:{{calculationPoint|price}}</text>
              </div>
            </div>
            <div class="cash-out-cash-main-cash-bottom-cash-btn">
              <div class="cash-out_cash_main_cash-bottom_cash-btn_button"  type="primary" @click="cashOut">
                <text style="font-size: 38px;color:#ffffff" >提现</text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottomFrame @selectedInfo="selectedInfo"  ref="bottomFrame" productId="1"></bottomFrame>
  </div>

</template>

<script>
const eeui = app.requireModule('eeui');
import { list as getInfo } from '@/api/shareCenter';
import {
  transfer,calculate
} from '@/api/point';
import {
  list as accountlist
} from '@/api/account'
import bottomFrame from '@/components/bottomFrame/bottomFrame1.vue'



import myNavbar from "../../../components/myNavbar/myNavbar.vue";

export default {
  data(){
    return{
      calculationPoint:0,
      accountitem:{},
      point:0,
      maxTransferPoint:0,
      balance: 0,
      amount: '',
      maxlength: 10,
      disabled: true,
      accountId:'',
      paymentPluginId:''
    }
  },
  components: { myNavbar,	bottomFrame},
  mounted(){
    this.getBalance();
    this.getBank();
  },
    filters:{
    price(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    number(value){
      var toFixedNum = Number(value).toFixed(0);
      return toFixedNum;
    }
  },
  methods:{
    calculationPoint1(){
      let params = {
        amount:this.amount,
      }
      if (this.amount > this.point/100) {
        eeui.toast('余额不足')
      } else if (this.amount == 0) {
        eeui.toast('提现金额不能为0')
      } else if (this.amount < 0) {
        eeui.toast( '提现金额不能为负数')
      } else if (isNaN(this.amount)) {
        eeui.toast('请输入正确格式')
      } else{
        calculate(params).then(res=>{
          this.calculationPoint = res.data
        })
      }
    },

    getBank(){
      accountlist().then(res=>{
        if(res.type == "success"){
          console.log(res.data)
          console.log(res.data.length)
          if(res.data.length>0){
            this.accountitem = res.data[0]
          }else {
            this.accountitem[0].push({id:""})
          }
        }
      })
    },
    selectedInfo(item){
      this.accountitem = item
    },
    getBalance () {
      getInfo().then(res => {
        this.point =res.data.point.toFixed(2);
        this.maxTransferPoint =res.data.maxTransferPoint.toFixed(2);

      }).catch(err => {
        console.log(err)
      })
    },

    wholeCashOut () {
      this.amount = Number(this.maxTransferPoint)/100
      this.calculationPoint1()
    },

    Selectbank(){
      this.$refs.bottomFrame.showFrame("3329", "buyNow");
    } ,




    cashOut () {





      // eeui.confirm({
      //   title: "提示",
      //   message: "请确保该存量宝或宏米账号有足够的余额可以抵扣，否则提现将不会到账",
      //   buttons: ["取消", "确定"]
      // }, function (result) {
      //   if (result.status == "click" && result.title == "确定") {
      //
      //   }
      // });

      eeui.confirm({
        title: "提示",
        message: "请确保该存量宝或宏米账号有足够的余额可以抵扣，否则提现将不会到账",
        buttons: ["取消", "确定"]
      }, (result)=> {
        if (result.status == "click" && result.title == "确定") {

          if (this.amount > this.point/100) {
            eeui.toast( '余额不足')
          } else if (this.amount == 0) {
            eeui.toast( '提现金额不能为0')
          } else if (this.amount < 0) {
            eeui.toast('提现金额不能为负数')
          } else if (isNaN(this.amount)) {
            eeui.toast( '请输入正确格式')
          } else if(this.accountitem.id == null){
            eeui.toast( '请添加账号')
          } else {
            let params = {
              accountId:this.accountitem.id,
              amount:this.amount,
            }
            transfer(params).then(res => {
              if(res.type== 'success'){
                eeui.toast('提现成功')
                eeui.openPage({
                      url: 'root://pages/member/distribution/index',
                      statusBarType: 'immersion',
                      statusBarStyle: false
                    }, (result) => {}
                );
              }
            }).catch(err => { console.log(err) })
          }

        }
      });



    },

    addbank(){
      eeui.openPage({
            url: 'root://pages/member/distribution/addBank',
            statusBarType: 'immersion',
            statusBarStyle: false
          }, (result) => {}
      );
    }
  }

}
</script>


<style>

.mine-container {
  position: relative;
}
.bg {
  position: absolute;
  width: 750px;
  height: 600px;
  background-image: linear-gradient(to bottom, #c2c2c2, #f8f8f8);
  z-index: 0;
}
.vein {
  position: absolute;
  width: 750px;
  z-index: 5;
  height: 300px;
  display: inline-block;
  overflow: hidden;
}

.cash-out-cash-main {
  margin: 30px;
  background-color: #f7f7f7;
  border-radius: 14px;
}

.cash-out-cash-main-cash-top {
  font-size: 30px;
  color: #555;
  padding: 40px;
}



.cash-out-cash-main-cash-bottom {
  background-color: #fff;
  padding-top: 10px;
}

.cash-out-cash-main-cash-bottom-cash-center-cash-center-top {
  margin-left: 40px;
  font-size: 30px;
  color: #555;
}


.cash-out-cash-main-cash-bottom-cash-center-cash-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 55px;
  padding-top: 30px;
  padding-bottom: 30px;
}


.cash-out-cash-main-cash-bottom-cash-center-cash-data-cash-center-mark {
  font-size: 40px;
  margin-left: 40px;
  margin-right: 40px;
}


.center-bottom-cash-center-text {
  color: #00aaef;
}


.cash-out-cash-main-cash-bottom-cash-center-cash-data-cash-center-input {
  background-color: #fff;
  flex: 1;
  min-height: 65px;
}


.cash-out-cash-main-cash-bottom-center-bottom {

  font-size: 25px;
  color: #b6b6b6;
  border-top-color: #ccc;
  border-top-style:solid;
  border-top-width: 1px;
  margin-left: 40px;
  margin-right: 40px;
  padding-top: 45px;
  padding-bottom: 45px;
}


.cash-out-cash-main-cash-bottom-center-bottom-cash-center-text {
  color: #5b6a88;
}


.cash-out-cash-main-cash-bottom-cash-btn {
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cash-out_cash_main_cash-bottom_cash-btn_button{
  display: flex;
  align-items: center;
  justify-content: center;
  height:78px;
  width: 610px;
  color: #ffffff;
  background-color:#ff8400;
  border-radius: 12px;
}

.main-top{
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  justify-content: space-around;
  align-items: center;
}
.mine-order-icon {
  font-family: iconfont2;
  font-size: 30px;
}



</style>
